<template>
    <div class="category">
        <el-form :inline="true" v-model="categoryStore" class="demo-form-inline">
            <el-form-item label="一级分类">
                <el-select
                    :disabled="disabled"
                    placeholder="请选择一级分类"
                    v-model="categoryStore.c1Id"
                    @change="handleC1Change"
                >
                    <el-option
                        v-for="item in categoryStore.c1Arr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select
                    :disabled="disabled"
                    placeholder="请选择二级分类"
                    v-model="categoryStore.c2Id"
                    @change="handleC2Change"
                >
                    <el-option
                        v-for="item in categoryStore.c2Arr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select
                    :disabled="disabled"
                    placeholder="请选择三级分类"
                    v-model="categoryStore.c3Id"
                >
                    <el-option
                        v-for="item in categoryStore.c3Arr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, computed } from 'vue'
import { useCategoryStore } from '@/store/modules/category'

const categoryStore = useCategoryStore()

onMounted(() => {
    getC1()
})
const getC1 = async () => {
    await categoryStore.getCategory1()
}

const handleC1Change = async () => {
    categoryStore.c2Id = ''
    categoryStore.c3Id = ''
    categoryStore.c3Arr = []
    await categoryStore.getCategory2()
}

const handleC2Change = async () => {
    categoryStore.c3Id = ''
    categoryStore.c3Arr = []
    await categoryStore.getCategory3()
}

const props = defineProps(['scene'])

const disabled = computed(() => props.scene === 1)
</script>

<style lang="scss" scoped>
.demo-form-inline {
    .el-input {
        --el-input-width: 220px;
    }

    .el-select {
        --el-select-width: 220px;
    }
}
</style>
